<template>
<div class="viewMail">
  <el-row>
    <el-col :span="10">
      {{mailForm.title}}
    </el-col>
    <el-col :span="4">
      {{attribute(mailForm.attrId)}}
    </el-col>
    <el-col :span="4">
      {{mailForm.author}}
    </el-col>
    <el-col :span="6">
      {{dateFormat(mailForm.createTime)}}
    </el-col>
  </el-row>
  <div class="mail-view-detail">
    <p class="mail-view-title">标题：{{mailForm.title}}</p>
    <div class="mail-view-content" v-html="mailForm.content"></div>
  </div>
  <el-row class="submit-wrap">
    <el-col :span="24">
      <el-button type="primary" style="width:100px" @click="useMail()">使用</el-button>
      <el-button type="primary" style="width:100px" @click="closeView()">关闭</el-button>
    </el-col>
  </el-row>

</div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        mailForm: {
          id: this.$route.params.id,
          attrId: '',
          title: '',
          content: '',
          attachName: '',
          attachPath: '',
          groupType: true,
          commonType: false,
          dialogChooseMail: false
        }
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        mailDetail: state => state.contentManage.mailDetail,
        attrs: state => state.contentManage.contentType
      })
    },
    methods: {
      ...mapActions(['getMailDetail', 'getContentTypes']),
      async initPage () {
        this.getContentTypes()
        await this.getMailDetail(this.mailForm.id)
        .then(() => {
          this.mailForm = {
            ...this.mailForm,
            ...this.mailDetail
          }
        })
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD hh:mm:ss')
      },
      attribute (id) {
        let attrName
        Object.values(this.attrs).forEach((key, value) => {
          if (key.id === id) {
            attrName = key.name
          }
        })
        return attrName
      },
      useMail () {
        // window.localStorage.useMailId = this.mailForm.id
        this.$router.push({name: 'EditMail', params: {id: 'add', mailId: this.mailForm.id}})
      },
      closeView () {
        this.$router.go(-1)
      }
    }
  }
</script>
<style lang="scss" scope>
  .vb-h{
    visibility: hidden;
  }
  .viewMail{
    .block-line{display:block;width:100%;}
    .block-line .el-form-item__content{display: block;}
  
    .el-col{
      font-size: 14px;
      text-indent: 40px;
    }

  }
  .mail-view{
    &-detail{
      margin-top: 20px;
      background: rgba(242, 242, 242, 1);
      min-height: 400px;
      padding: 30px 40px;
    }
    &-title{
      font-size: 16px;
      border-bottom: 1px solid #fff;
      width: 100%;
      padding-bottom: 10px;
    }
    &-content{
      margin-top: 10px;
      font-size: 14px;
    }
  }
  .submit-wrap{
    padding: 20px 0;
    text-align: center;
  }
</style>
